<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>福师大计网学院青年志愿者协会</title>
    <style>
            *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 0;
            font-family: "楷体";
        }
        body{
            height: 1000px;
            background: url("img/bg11.gif");
        }
        #titlediv{
            height: 170px;
            width: 1200px;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
            position: relative;
            text-align: center;
        }
        #logo{
            display: inline-block;
            
        }
        #nav{
            width: 1200px;
            height: 60px;
            background-image: url("img/bg.jpg");
            background-size: auto;
            margin: 0 auto;
        }
        #nav ul>li{
            color: black;
            font-family: "楷体";
        }
        #nav ul li{
            display: inline-block;
            line-height: 60px;
            font-size: 24px;
            width: 300px;
            text-align: center;
            position: relative;
        }
        a{
            text-decoration: none;
        }
        .seconddiv{
            position: absolute;
            top: 60px;
            width: 300px;
            overflow: hidden;
            border-top: 0;
            border-bottom: 0;
            display: none;
            z-index: 2;
        }
        .seconddiv a{
            color: #000000;
        }
        .firstli{
            line-height: 60px;
            font-family: "粗体";
        }
        .secondli{
            vertical-align: top;
            display: inline-block;
            height: 60px;
            border-bottom: 1px solid rgba(0,255,255,0.7);
        }
        .secondli:hover{
            background:url("img/bg.jpg");
        }
        .firstli:hover .seconddiv{
            display: block;   
        }
        .firstli:hover{
            background-color: rgba(255,255,255,0.7);
            cursor: pointer;
        }
        #main{
            width: 1200px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        #loop{
            width: 750px;
            height: 600px;
            background-color: white;
            margin: 0 auto;
            display: inline-block;
            position: relative;
            
        }
        .button{
            position: absolute;
            bottom: 10px;
            left: 110px;
            height: 20px;
        }
        .button span{
            font-size: 14px;
            
            padding: 0 10px;
            line-height: 20px;
            color: #F0F8FF;
            margin: 9px;
        }
        .button span:hover{
            cursor: pointer;
        }
        .shown{
            display: block;
        }
        .hidd{
            display: none;
        }
        .shownspan{
            background-color: #6978a0;
        }
        .hiddspan{
            background-color: #ac5773;
        }
        #logo0{
            /* display: none; */
            width: 450px;
            height: 400px;
            background-image: url(img/logo.jpg);    
            background-size: 450px 400px; 
            position: absolute;
            background-repeat: no-repeat;
            
            position: absolute;
            right: 0;
            top: 0;
        }
        #kuaisu{
            /* display: none; */
            /* border: 1px solid cadetblue; */
            width: 450px;
            height: 200px;
            background-image: url("img/bg3.jpg");
            position: absolute;
            right: 0;
            top: 400px;
            padding-bottom: 10px;
            padding-left: 10px;
        }
        #kuaisuspan{
            display: inline-block;
            font-size: 24px;
            color: #000000;
            height: 45px;
            margin-left: 45px;
        }
        #kuaisu a{
            font-size: 20px;
            color: #000000;
            display: inline-block;
            
        }
        #kuaisu table{
            font-size: 20px;
        }
        #kuaisu table td{
            text-align: center;
            font-size: 20px;
            height: 60px;
            width: 200px;
            background-image: url("img/bg2.jpg");
            background-size: auto;
        }
        #kuaisu table td:hover{
            background-color: rgb(230,230,230);
        }
        
        #kuaisu table td img{
            vertical-align: middle;
        }
        #news{
            
            width: 600px;
            height: 300px;
            background:url("img/bg.jpg");
            display: inline-block;
            padding-left: 30px;
        }
        #news a {
            color: #000000
        }
        #news a:hover{
            color: cornflowerblue;
        }
        #gonggao a {
            color: #000000
        }
        #gonggao a:hover{
            color: cornflowerblue;
        }
        #gonggao{
            border-left:0;
            width: 600px;
            height: 300px;
            background:url("img/bg.jpg");
            display: inline-block;
        }
        .text{
            font-size: 20px;
        }
        
        #gonggao{
            padding-left: 40px;
            
        }
        #newsul li{
            font-size: 20px;
            list-style-type: circle;
            margin-top: 0px;
            line-height: 50px;
            
        }
        #newsul{
            background:url("img/bg5.gif");
            padding: 15px 10px;
            width: 540px;
            height: 80%;
        }
        #gonggaoul{
            background:url("img/bg5.gif");
            padding: 15px 10px;
            width: 540px;
            line-height: 50px;
            height: 80%;
        }
        #newsul ul{
            
            
            margin-left: 20px;
            
        }
        #gonggaoul ul{
            
            margin-left: 20px;
            
            
        }
        #gonggaoul li{
            font-size: 20px;
            list-style-type: circle;
            margin-top: 0px;
        }
        .newstitle{
            display: inline-block;
            font-size: 24px;
            color: #000000;
            margin: 10px 0;
        }
</style>
</head>
<body>
    <!-- 头部 -->
    <div id="titlediv">
      <img src="img/QQ图片20211227001028.png" width="100%" height="200px" id="logo">   
    </div>
    <!-- 导航栏 -->
    <div id="nav">
        <ul>
            <a href="主页面.html"><li class="firstli">首页</li></a>
            <li class="firstli">精彩推送
            <div class="seconddiv">
                <ul>
                    <a href="#"><li class="secondli">淘古艺术家</li></a>
                    <a href="#"><li class="secondli">毕业季</li></a>
                    <a href="#"><li class="secondli">换届大会</li></a>
                </ul>
            </div></li>
            <li class="firstli">活动介绍
            <div class="seconddiv">
                <ul id="secondul">
                    <a href="#"><li class="secondli">“麦”向梦想活动</li></a>
                    <a href="#"><li class="secondli">回收旧衣物</li></a>
                    <a href="#."><li class="secondli">志愿服务嘉年华</li></a>
                    <a href="#."><li class="secondli">爱心回收小能手</li></a>
                </ul>
            </div></li>
            <li class="firstli">关于协会
            <div class="seconddiv">
                <ul>
                    <a href="#"><li class="secondli">协会介绍</li></a>
                    <a href="#"><li class="secondli">部门介绍</li></a>
                    
                </ul>
            </div></li>
        </ul>
    </div>
    <!-- 主体部分 -->	
    <div id="main">
        <!-- 轮播图 -->
        <div id="loop" onmouseover="stopTime()" onmouseout="startTime()">
                        
            <img src="img/loop1.jpg"  width="750px" height="600px" class="shown">
            <img src="img/loop2.jpg"  width="750px" height="600px" class="hidd" >
            <img src="img/loop3.jpg"  width="750px" height="600px" class="hidd">
            <img src="img/loop4.jpg"  width="750px" height="600px" class="hidd">
            <img src="img/loop5.jpg"  width="750px" height="600px" class="hidd" >
        </ul>
            <div class="button">
                <span onmouseover="thisImg(0)" class="shownspan">1</span>
                <span onmouseover="thisImg(1)" class="hiddspan">2</span>
                <span onmouseover="thisImg(2)" class="hiddspan">3</span>
                <span onmouseover="thisImg(3)" class="hiddspan">4</span>
                <span onmouseover="thisImg(4)" class="hiddspan">5</span>
            </div>
        </div>
        <!-- 图标 -->
        <div id="logo0">
            
        </div>
        <!-- 快速访问 -->
        <div id="kuaisu">
            <span id="kuaisuspan" style="padding-left: 10px; padding-top: 10px;">
                快速访问
            </span>
            <table border="0px" cellspacing="0" cellpadding="0">
                
                <tr>
                    <td><a href="#">我要报名</a></td>
                    <td><a href="#">我要退会</a></td>
                </tr>
                <tr>
                    <td><a href="#">人事干部</a></td>
                    <td><a href="#">联系我们</a></td>
                </tr>
            </table>
        </div>
        <!-- 协会新闻 -->
        <div id="news">
            <span class="newstitle">协会要闻</span>
            <div id="newsul">
                <ul>
                <a href="#"><li style="margin: 0;">“麦”向梦想活动圆满结束<span style="float: right; font-size: 14px;">12.24</span></li></a>
                <a href="#"><li>“回收旧衣物”活动圆满结束<span style="float: right; font-size: 14px;">12.01</span></li></a>	
                <a href="#"><li>志愿服务嘉年华活动圆满结束<span style="float: right; font-size: 14px;">11.29</span></li></a>	
                <a href="#"><li>“爱心回收小能手”活动圆满结束<span style="float: right; font-size: 14px;">11.29</span></li></a>	
                </ul>
            </div>
        </div>
        <!-- 协会公告 -->
        <div id="gonggao">
            <span class="newstitle">协会公告</span>
            <div id="gonggaoul">
                <ul>
                    <a href="#"><li style="margin: 0;">“旧车搬运工”活动圆满结束<span style="float: right; font-size: 14px;">11.29</span></li></a>
                    <a href="#"><li>淘古艺术家活动圆满结束<span style="float: right; font-size: 14px;">11.23</span></li></a>	
                    <a href="#"><li>数学竞赛志愿活动圆满结束<span style="float: right; font-size: 14px;">11.14</span></li></a>	
                    <a href="#"><li>校运动会志愿者服务活动已经圆满结束<span style="float: right; font-size: 14px;">11.09</span></li></a>	
                </ul>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript">
    var k=1;//控制下标
    //让图默认时，轮着换
    
    function showPic(){
        
      var lop=document.getElementById("loop");
      //lop下的通过标签名来取元素
      var imgs=	lop.getElementsByTagName("img");
      // alert(imgs.length)
      var spans=lop.getElementsByTagName("span");
      for(var i=0;i<imgs.length;i++){
          if(i==k){
             imgs[i].className="shown"; 
             spans[i].className="shownspan"; 
          }else{
              imgs[i].className="hidd"; 
              spans[i].className="hiddspan"; 
              }
          
          }
        //循环外
     if(k>=imgs.length-1){
         k=0;
     }else{
         k++;
         }	  
          
    }
    //启动定时任务 
    timer=setInterval("showPic()",3000);
    
    function stopTime(){
        clearInterval(timer);//取消定时
    }
    function startTime(){
        timer=setInterval("showPic()",3000);
        }
    function thisImg(x){
        k=x;
        showPic();
        }	
</script>
</html>